<template>
    <view class="content">
      <image
        class="bg"
        :src="EnumBG.GET"
        mode="widthFix"
      ></image>
      <image
      v-if="buttonShow"
      class="h-button-def"
      :class=" sizeStatus ? 'h-button':'h-button-samll'"  
      src="@/static/button/tip.png"
      mode="widthFix"
    ></image>

        <view  class="show-bg"  :style="{ 'background-image': 'url(' + EnumBG.BG1 + ')' }">
            <view class="show-h" :style="{ 'background-image': 'url(' + EnumBG.BU3 + ')' }">
            {{dataText}}
        </view>
        </view>
        <view class="get-re" @click="copy"  :style="{ 'background-image': 'url(' + EnumBG.BU4 + ')' }">
            复制内容
        </view>

        <view @click="toDef" class="share" :style="{ 'background-image': 'url(' + EnumBG.BU4 + ')' }">
            重新生成
        </view>

    </view>
    <Roast />
    <Recommend :top='90' />
    <ToDY />
</template>

<script setup lang="ts">
import Roast from "@/components/Roast/Roast.vue";
import Recommend from "@/components/Recommend/Recommend.vue";
import { EnumBG } from "@/utils/content";
import ToDY from "@/components/ToDY/ToDY.vue";
const sizeStatus = ref(false)
const buttonShow = ref(false)
const dataText =ref("")
// 定义每秒执行一次的定时方法
const startTimer = () => {
setInterval(() => {
    sizeStatus.value =  !sizeStatus.value
}, 1000); // 每秒执行一次
};
const toDef = ()=>{
    uni.navigateTo({
            url:`/subPackages_play/homophonic/homophonic`    
      }) 
}

const copy = ()=>{
    uni.setClipboardData({
	data: dataText.value,
	success: function () {
		uni.showToast({
            title:"复制成功"
        })
	}
});
}

onLoad((data) => {
dataText.value =  data?.text
startTimer();
});
onReady(()=>{
    buttonShow.value = true
})

</script>
  
  <style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    .bg{
      width: 100%;
      z-index: -1;
      height: 200rpx;
    }
    .h-button-def{
        position: absolute;
        z-index: 99;
        top: 61%;
        height: 170rpx;
        left: 47.5%;
    }
    .h-button{
        position: absolute;
        z-index: 99;
        top: 61%;
        width: 52%;
        left: 47.5%;
        transition: all 1s;
    }
    .h-button-samll{
        position: absolute;
        z-index: 99;
        top: 62%;
        width: 46%;
        left: 50%;
        transition: all 1s;
    }
    .show-bg{
        position: absolute;
        z-index: 98;
        top: 35%;
        width: 80%;
        height: 400rpx;
        left: 9%;
        line-height: 180rpx;
        text-align: center;
        font-size: 55rpx;
        color: white;
        letter-spacing: 2px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 50rpx;
    }
    .show-h{
        width: 90%;
        height: 180rpx;
        line-height: 180rpx;
        text-align: center;
        font-size: 55rpx;
        color: white;
        letter-spacing: 2px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .get-re{
        position: absolute;
        z-index: 99;
        top: 70%;
        width:300rpx;
        height: 110rpx;
        text-align: center;
        line-height: 110rpx;
        left: 7%;
        font-size: 45rpx;
        letter-spacing: 2px;
        color: rgb(0,255,226);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .share{
        position: absolute;
        z-index: 99;
        top: 70%;
        width:300rpx;
        height: 110rpx;
        left: 52.5%;
        text-align: center;
        line-height: 110rpx;
        font-size: 45rpx;
        letter-spacing: 2px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: rgb(0,255,226);
    }
  }
  page {
    width: 100%;
    height: 100%;
  }
  </style>
  